<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { getClassList } from "@/api/student/my/my";
import { getHMS } from "@/utils/time";

const activeNames = ref(["1"]);

const handleChange = (val: string[]) => {
  console.log(val);
};

let exam: any = reactive([]);
onMounted(() => {
  exam.length = 0;
  getClassList().then((res) => {
    if ((res.data.msg = "请求成功")) {
      if (res.data.data.length > 0) {
        exam.push(res.data.data);
      }

      // console.log(exam.length);
    }
  });
});
</script>
<!--我的课程表-->
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>
          <h3 class="Title">我的课程表</h3>
        </el-header>
        <el-main class="main">
          <el-scrollbar height="300px">
            <template v-if="exam.length > 0" v-for="(item, index) in exam[0]">
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item :title="item.className" :name="index + 1">
                  <template v-for="tt in item.videoVos">
                    <div class="box">
                      <div>
                        <span>{{ tt.videoName }}</span>
                        <p>课程时长:{{ tt.videoDuration }}</p>
                      </div>
                      <div>
                        <el-button class="btn" plain>开始学习</el-button>
                      </div>
                    </div>
                  </template>
                </el-collapse-item>
              </el-collapse>
            </template>
            <template v-if="exam.length == 0">
              <el-empty description="暂无课程" />
            </template>
          </el-scrollbar>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.Title {
  color: #23b8ff;
  font-weight: bold;
}

p {
  color: #aaaaaa;
}

.main {
  background-color: white;
}

.box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 13px;
}

.btn {
  width: 80px;
}
</style>
